<template>
  <!--首页导航-->
  <nav class="msite_nav">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- 这里有两个轮播，一个轮播图上有8张小图片， -->
        <div class="swiper-slide" v-for="(items,index) in categorysArr" :key="index">
          <a href="javascript:" class="link_to_food" v-for="(item,index) in items" :key="index">
            <div class="food_container">
              <img :src="imgBaseUrl + item.image_url" />
            </div>
            <span>{{item.title}}</span>
          </a>
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
  </nav>
</template>

<script>



import Swiper from "swiper";
import "swiper/css/swiper.min.css";
//引入mapstate映射
import { mapState } from "vuex";
export default {
  props: {},
  data() {
    return {
      imgBaseUrl: "https://fuss10.elemecdn.com"
    };
  },
  computed: {
    ...mapState(["categorys"]),
    categorysArr() {
      let bigArr = [];
      let smallArr = [];
      let max = 8;
      let { categorys } = this; //this vue实例对象
      categorys.forEach(v => {
        if (smallArr.length == 0) {
          bigArr.push(smallArr); //第一次[[]] 第二次的时候[[8],[]]
        }
        //当传入参数时
        smallArr.push(v);
        //如果前面的小数组的长度满足8了，后面的小数组只能往后排
        if (smallArr.length == max) {
          smallArr = [];
        }
      });
      return bigArr;
    }
  },
  created() {},
  mounted() {
    //dom才可以拿到dom的数据
  },

  watch: {
    categorys(newVal, oldVal) {
      if (newVal) {
        this.$nextTick(v => {
          var mySwiper = new Swiper(".swiper-container", {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination"
            }
          });
        });
      }
    }
  },
  methods: {},
  components: {}
};
</script>


<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixins.styl'
.msite_nav
  bottom-border-1px(#e4e4e4)
  margin-top 45px
  height 200px
  background #fff
  .swiper-container
    width 100%
    height 100%
    .swiper-wrapper
      width 100%
      height 100%
      .swiper-slide
        display flex
        justify-content center
        align-items flex-start
        flex-wrap wrap
        .link_to_food
          width 25%
          .food_container
            display block
            width 100%
            text-align center
            padding-bottom 10px
            font-size 0
            img
              display inline-block
              width 50px
              height 50px
          span
            display block
            width 100%
            text-align center
            font-size 13px
            color #666
    .swiper-pagination
      >span.swiper-pagination-bullet-active
        background #02a774
</style>
